import React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import { Checkbox, Grid, Typography, FormControlLabel, Button } from '@material-ui/core';
import { Line } from '@ant-design/charts';
const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            flexGrow: 1,
        },
        paper: {
            padding: theme.spacing(8),
            margin: 'auto',
            display: "flex",
            flexDirection: "column",
            alignItems: "center"
        },
        form: {
            width: "100%", // Fix IE 11 issue.
            marginTop: theme.spacing(1),

        },
        control: {
            marginTop: theme.spacing(1),
        }
    }),
);

export function Cheat() {
    const classes = useStyles();
    const date = new Date();
    let pre = Math.floor(Math.random() * 100 + 485);
    const data = Array.from({ length: 100 }, (_, i) => {
        const d = new Date(date);
        d.setDate(date.getDate() + i);
        let count = (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * 200);
        if (pre < 400) count = 20;
        else if (pre > 2500) count = -20;
        count += pre;
        pre = count;
        return {
            date: d.toLocaleDateString(),
            count: count,
        }
    });

    const config = {
        data,
        height: 400,
        xField: 'date',
        yField: 'count',
        point: {
            size: 5,
            shape: 'diamond',
        },
        label: {
            style: {
                fill: '#aaa',
            },
        },
    };

    return <div className={classes.paper}>
        <Grid container spacing={2}>
            <Grid item xs={4} container>
                <Typography component="h1" variant="h5">
                    预测数据
				</Typography>
                <div className={classes.form}>
                    <Grid>
                        <FormControlLabel className={classes.control}
                            control={<Checkbox name="checkedA" />}
                            label="是否为双十等特殊时期"
                        />

                    </Grid>
                    <Grid>
                        <Button className={classes.control} variant="contained" color="primary">导入数据</Button>
                    </Grid>
                </div>
            </Grid>
            <Grid item xs={8}>
                <Line {...config} />
            </Grid>
        </Grid>
    </div>
}